<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>抱团</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta name="keywords" content="抱团">
    <meta name="description" content="抱团">
    <script type="text/javascript" src="js/base.js" charset="UTF-8"></script>
    <!-- <link rel="stylesheet" type="text/css" href="css/theme-chalk/index.css"> -->
    <!-- <link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"> -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type='text/javascript' src="js/jquery.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="js/html2canvas.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/layer/layer.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/axios.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/elementui.min.js" charset="UTF-8"></script> -->
    <!-- <script type='text/javascript' src="js/swiper-bundle.min.js" charset="UTF-8"></script> -->
    <script type='text/javascript' src="js/qrcode.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/helper.js" charset="UTF-8"></script>
</head>
<body>
<div class="wrapperbox hasmenu page my" id="app" v-if="loaded==true">
    <!-- 身份信息 -->
    <div class="userBox">
        <div class="usermsg">
            <div class="left">
                <img class="img" :src="user_info.avatar_url">
                <div class="userInfo">
                    <div class="name">{{user_info.nickname}}</div>
                    <div class="tel">{{user_info.mobile}}</div>
                </div>
            </div>
            <div class="set" v-if="darendata.level!=1">
                <div class="item fxm" @click="openShareBox">分享码</div>
                <!-- <div class="item outlogin">退出</div> -->
            </div>
        </div>
        <!-- tip -->
        <div class="tips">
            <!--                <div class="text" v-if="darendata.level_desc.length>15">您目前是<span>{{darendata.level_name}}</span> 。<br>{{darendata.level_desc}}</div>-->
            <!--                <div class="text" v-if="darendata.level_desc.length<=15">您目前是<span>{{darendata.level_name}}</span> 。<br>{{darendata.level_desc}}</div>-->
            <div class="text">您目前是<span>{{darendata.level_name}}</span> 。{{darendata.level_desc}}</div>
            <div class="icon" @click="alertBoxToggle"></div>
            <!-- alert -->
            <div class="alertBox">
                <div class="des">{{darendata.tips}}</div>
            </div>
        </div>
    </div>
    <!-- 收益信息 -->
    <div class="syBox">
        <div class="top">
            <div class="text">我的总收益 : <span>{{shouyidata.total}}</span></div>
            <a href="./myJk.html" class="myjk">
                <div class="icon"></div>
                <div>我的金库</div>
            </a>
        </div>
        <div class="bottom">
            <div class="item">
                <div class="t">未提现</div>
                <div class="b">{{shouyidata.un_settled}}</div>
            </div>
            <div class="item">
                <div class="t">已提现</div>
                <div class="b">{{shouyidata.settled}}</div>
            </div>
            <div class="item">
                <div class="t">直卖收益</div>
                <div class="b">{{shouyidata.sale_profit}}</div>
            </div>
            <div class="item">
                <div class="t">团队收益</div>
                <div class="b">{{shouyidata.team_profit}}</div>
            </div>
        </div>
    </div>
    <div class="teambox" v-if="darendata.level!=1">
        <!-- 我的团队 ( 无人 ) -->
        <div class="myTeam" v-if="teamdata.list.length==0">
            <div class="til">
                <div class="l">我的团队(0人)</div>
            </div>
            <div class="userlist_">
                <img class="img" src="images/tx.png"></img>
                <div class="info">
                    <div>还没有团队人员</div>
                    <div>分享<span @click="openShareBox">我的二维码</span>让朋友加入吧</div>
                </div>
            </div>
        </div>
        <!-- 我的团队 ( 有人 ) -->
        <div class="myTeam" v-if="teamdata.list.length>0">
            <div class="til">
                <div class="l">我的团队({{teamdata.count}}人)</div>
                <a class="r" href="./myTeam.html">查看全部</a>
            </div>
            <div class="userlist">
                <img class="img" :src="item.avatar_url" v-for="(item,index) in teamdata.list" :key="index"
                     v-if="index<=5"></img>
            </div>
        </div>
    </div>

    <!-- btnlist -->
    <div class="setList">
        <a href="./my-hzsq.html" class="item">商务合作</a>
        <a href="./my-about.html" class="item">关于抱团</a>
        <a href="./my-addwx.html" class="item">添加管理员微信</a>
    </div>
    <!-- 分享码弹窗 -->
    <div class="shareBox">
        <div class="main">
            <div class="close" @click="closeShareBox"></div>
            <div class="hb">
                <img src="" alt="" id="shareimg">
            </div>
            <div class="tip">长按保存海报</div>
        </div>
    </div>
    <div class="shareBoxpop">
        <img class="bg" src="images/share.png" alt="">
        <div class="con">
            <div class="user">
                <div class="tx"><img :src="user_info.avatar_url" alt=""></div>
                <p class="name">{{user_info.nickname}}</p>
            </div>
            <div class="des">
                <div class="destxt">
                    <p>我是{{darendata.level_name}} <span>{{user_info.nickname}}</span>，</p>
                    <p>扫码加入我的抱团大家庭吧</p>
                </div>
            </div>
            <div class="erm">
                <div id="qrcodeOne" class="qrcode"></div>
            </div>
        </div>
    </div>
    <div class="indexbotmenu">
        <a href="./index.html" class="item">
            <div class="img"><img src="images/index-botmenu-ico1.png" alt=""></div>
            <p>首页</p>
        </a>
        <a href="./order.html" class="item">
            <div class="img"><img src="images/index-botmenu-ico2.png" alt=""></div>
            <p>订单</p>
        </a>
        <a href="./my.html" class="item">
            <div class="img"><img src="images/index-botmenu-ico3-select.png" alt=""></div>
            <p>我的</p>
        </a>
    </div>
</div>

</body>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        user_info: {},
        loaded: false,
        darendata: '',
        shouyidata: '',
        teamdata: '',
      }
    },
    mounted() {
      var that = this;
      
      var user_info = JSON.parse(getCookie("user_info"));
      console.log(user_info)
      if (!user_info) {
        that.isLogin = false;
      } else {
        that.isLogin = true;
        that.user_info = user_info;
      }
      that.getdata();
    },
    methods: {
      getdata: function () {
        var that = this;
        that.page = 1;
        var ready1 = false, ready2 = false, ready3 = false;
        var load = setInterval(() => {
          if (ready1 == true && ready2 == true && ready3 == true) {
            that.loaded = true;
            clearInterval(load);
            that.$nextTick(function () {
              that.makecodeOne();
            })
          }
        }, 100)
        //查询达人概况
        talent_get('profile').then(res => {
          console.log(res);
          that.darendata = res;
          ready1 = true;
        })
        //查询收益概况
        talent_get('profits/total_summary').then(res => {
          console.log(res);
          that.shouyidata = res;
          ready2 = true;
        })
        //我的团队
        talent_get('my_team').then(res => {
          console.log(res);
          that.teamdata = res;
          ready3 = true;
        })
      },
      openShareBox: function () {
        var that = this;
        if ($('#shareimg').attr('src') == '') {
          var canvas2 = document.createElement("canvas");
          var _canvas = $('.shareBoxpop').get(0);
          var w = parseInt(window.getComputedStyle(_canvas).width);
          var h = parseInt(window.getComputedStyle(_canvas).height);
          canvas2.width = w;
          canvas2.height = h;
          canvas2.style.width = w + "px";
          canvas2.style.height = h + "px";
          var context = canvas2.getContext("2d");
          var index = layer.load(1, {shade: [0.6, '#000']});
          html2canvas(_canvas, {
            scrollY: 0,
            scrollX: 0,
            useCORS: true,
            canvas: canvas2,
            backgroundColor: null,
            scale: 3
          }).then(function (canvas) {
            layer.close(index);
            $('#shareimg').attr('src', canvas.toDataURL('image/png'));
            setTimeout(() => {
              $('.shareBox').fadeIn(500);
            }, 100)
          });
        } else {
          $('.shareBox').fadeIn(500);
        }
      },
      makecodeOne: function () {
        var that = this;
        var qrcodetxt = 'https://prod.baotuan.vip/talent_reg?pid=' + that.user_info.talent_id;
        qrcode = new QRCode($('#qrcodeOne').get(0), {
          text: qrcodetxt,
          width: 160,
          height: 160,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      },
      closeShareBox: function () {
        var that = this;
        $('.shareBox').fadeOut(500);
      },
      alertBoxToggle: function () {
        var that = this;
        $('.alertBox').fadeToggle(500);
      },

    }
  });
</script>
</html>